<template>
  <Modal title="增加"
         v-model="modelView"
         :mask-closable="false"
         :fullscreen="false"
         :width="620"
         :closable="false"
         @on-visible-change="changeVisible">
    <Form :model="formData" :label-width="80">
      <Row style="margin:0 0 25px 0" :gutter="10">
        <Col :span="23" offset="1">
          <Upload :action="uploadAction"
                  :show-upload-list="false"
                  :before-upload="beforeUpload"
                  :on-success="uploadSuccess">
            <img v-if="avatar" class="user-logo" :src="avatar">
            <Icon v-else type="ios-person" size="24"></Icon>
            <div slot="tip" class="upload-tip">上传头像</div>
          </Upload>
        </Col>
      </Row>
      <Row>
        <Col :span="11">
          <FormItem label="登录名:">
            <Input v-model="formData.loginName"/>
          </FormItem>
        </Col>
        <Col :span="11">
          <FormItem label="用户名:">
            <Input v-model="formData.userName"/>
          </FormItem>
        </Col>
      </Row>
      <Row>
        <Col :span="11">
          <FormItem label="手机号:">
            <Input v-model="formData.phone"/>
          </FormItem>
        </Col>
        <Col :span="11">
          <FormItem label="邮箱:">
            <Input v-model="formData.email"/>
          </FormItem>
        </Col>
      </Row>
      <Row>
        <Col :span="11">
          <FormItem label="svn用户名:">
            <Input v-model="formData.svnUser"/>
          </FormItem>
        </Col>
        <Col :span="11">
          <FormItem label="svn密码:">
            <Input v-model="formData.svnPwd" type="password"/>
          </FormItem>
        </Col>
      </Row>
    </Form>
    <div slot="footer">
      <Button type="text" @click="cancel">取消</Button>
      <Button type="primary" :loading="buttonLoading" @click="ok">确定</Button>
    </div>
  </Modal>
</template>

<script>
  import {add} from "@/api/sys/user"
  import {Base64} from 'js-base64'

  export default {
    name: "add",
    props: {
      visible: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        modelView: false,
        formData: {
          loginName: null,
          userName: null,
          phone: null,
          email: null,
          svnUser: null,
          svnPwd: null
        },
        avatar: null,
        buttonLoading: false,
        uploadAction: config.baseUrl + config.contextPath + '/user/uploadFace'
      }
    },
    watch: {
      visible(newVal) {
        this.modelView = newVal
      }
    },
    methods: {
      changeVisible() {
        this.formData = {}
        this.$emit('update:visible', this.modelView)
      },
      beforeUpload(file) {
        const isJPG = file.type === 'image/jpeg'
        const isLt2M = file.size / 1024 / 1024 < 2

        if (!isJPG) {
          this.$Modal.error({
            title: '错误信息',
            content: '上传头像图片只能是 JPG 格式!'
          })
          return false
        }
        if (!isLt2M) {
          this.$Modal.error({
            title: '错误信息',
            content: '上传头像图片大小不能超过 2MB!'
          })
          return false
        }
        return isJPG && isLt2M
      },
      uploadSuccess(res, file) {
        this.avatar = res.fileUrl
      },
      cancel() {
        this.modelView = false
      },
      ok() {
        const self = this
        const params = {
          avatar: self.avatar,
          loginName: self.formData.loginName,
          userName: self.formData.userName,
          phone: self.formData.phone,
          email: self.formData.email,
          svnUser: self.formData.svnUser
        }
        if (self.formData.svnPwd) {
          params.svnPwd = Base64.encode(self.formData.svnPwd)
        }
        self.buttonLoading = true
        add(params)
          .then(response => {
            self.buttonLoading = false
            self.modelView = false
            self.$emit('on-ok', params)
            self.$Modal.info({
              title: '提示信息',
              content: '用户创建成功，密码=用户名'
            })
          })
          .catch((err) => {
            self.buttonLoading = false
            self.$Message.error({
              content: err,
              duration: 10,
              closable: true
            })
          })
      }
    }
  }
</script>

<style scoped>
  .upload-tip {
    position: relative;
    top: 15px;
  }

</style>
